<template>
  <div class="Msg">
    <div class="MsgInner">
      <div class="MsgLeft scrollHidden">
        <span>客服人员</span>
        <div v-for="(item, index) in service" :key="index" class="service">
          <img :src="item.avatar" alt="" />
          <div class="serMsg">
            <span>名字:{{ item.nickname }}</span>
            <span>性别:{{ item.gender }}</span>
            <span>ID:{{ item.username }}</span>
          </div>
          <div class="EvaluationEntrance">
            <el-button type="text" @click="getWorkerEvaMsg(item.id)"
              >我的评价</el-button
            >

            <el-dialog title="我的评价" :visible.sync="MyEvaluateTableVisible">
              <el-table :data="MyEvaluate">
                <el-table-column
                  property="createTime"
                  label="日期"
                  width="180"
                ></el-table-column>
                <el-table-column
                  property="content"
                  label="评语"
                ></el-table-column>
                <el-table-column label="是否满意" width="100">
                  <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.type === '非常满意'">
                      非常满意
                    </el-tag>
                    <el-tag v-if="scope.row.type === '满意'"> 满意 </el-tag>
                    <el-tag v-if="scope.row.type === '一般'" type="info">
                      一般
                    </el-tag>
                    <el-tag v-if="scope.row.type === '不满意'" type="warning">
                      不满意
                    </el-tag>
                    <el-tag
                      v-if="scope.row.type === '非常不满意'"
                      type="danger"
                    >
                      非常不满意
                    </el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-dialog>

            <!-- 评价客服 -->
            <el-button type="text" @click="EvaBtn(item.id)">评价客服</el-button>
          </div>
        </div>
      </div>
      <div class="MsgRight scrollHidden">
        <span>影院留言</span>
        <el-button type="primary" @click="isMyMessage = true"
          >添加留言</el-button
        >
        <div v-for="(item, index) in LeavingMsg" :key="index" class="cus">
          <img :src="item.user.avatar" alt="" />
          <div class="cusMsg">
            <span>{{ item.user.nickname }}</span>
            <span>{{ item.leavingMessage.content }}</span>
            <span>Time:{{ item.leavingMessage.createTime }}</span>
          </div>
        </div>

        <el-dialog title="添加留言" :visible.sync="isMyMessage">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="MyMessage"
            resize="none"
          >
          </el-input>
          <div slot="footer" class="dialog-footer">
            <el-button @click="isMyMessage = false">取 消</el-button>
            <el-button type="primary" @click="SubLeavingMsg()">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <el-dialog title="评价客服" :visible.sync="serviceEvaluate">
        <el-form>
          <el-form-item label="评价内容" label-width="100px">
            <el-select
              v-model="MyserviceEva.level"
              placeholder="请选择您的评价"
            >
              <el-option label="非常满意" value="非常满意"></el-option>
              <el-option label="满意" value="满意"></el-option>
              <el-option label="一般" value="一般"></el-option>
              <el-option label="不满意" value="不满意"></el-option>
              <el-option label="非常不满意" value="非常不满意"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="活动内容" label-width="100px">
            <el-input
              type="textarea"
              resize="none"
              :rows="5"
              placeholder="请输入内容"
              v-model="MyserviceEva.content"
            >
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="serviceEvaluate = false">取 消</el-button>
          <el-button type="primary" @click="Evaluate()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  getWorkerList,
  getLeavingMsg,
  getWorkerEvaMsg,
  evaluateWorker,
  LeavingMsg,
} from "@/api/user.js";
export default {
  name: "LeaveMsg",
  data() {
    return {
      MyEvaluateTableVisible: false,
      serviceEvaluate: false,
      isMyMessage: false,
      MyMessage: "",
      MyserviceEva: {
        level: "",
        content: "",
      },
      service: [
        {
          avatar: require("@/assets/LeaveMsg/u2868.svg"),
          nickname: "客服1",
          gender: "男",
          username: "539385ec-ef",
          evaluate: [
            {
              exaDate: "2022-06-05 16:26:56",
              content: "XXXXX",
            },
            {
              exaDate: "2021-05-23 15:25:36",
              content: "XXXXX",
            },
          ],
        },
        {
          avatar: require("@/assets/LeaveMsg/u2868.svg"),
          nickname: "客服2",
          gender: "男",
          username: "539385ed-ef",
          evaluate: [
            {
              exaDate: "2022-06-05 16:26:56",
              content: "XXXXX",
            },
            {
              exaDate: "2021-05-23 15:25:36",
              content: "XXXXX",
            },
          ],
        },
        {
          avatar: require("@/assets/LeaveMsg/u2868.svg"),
          nickname: "客服2",
          gender: "男",
          username: "539385ef-ef",
          evaluate: [
            {
              exaDate: "2022-06-05 16:26:56",
              content: "XXXXX",
            },
            {
              exaDate: "2021-05-23 15:25:36",
              content: "XXXXX",
            },
          ],
        },
      ],
      LeavingMsg: [
        {
          user: {
            avatar: "",
            username: "",
          },
          leavingMessage: {
            content: "",
            creatTime: "",
          },
        },
      ],
      MyEvaluate: [
        {
          createTime: "2022-06-05 16:26:56",
          content: "XXXX",
          type: "非常不满意",
        },
      ],
      EvaId: "",
    };
  },
  methods: {
    // 获取员工列表
    getWorker: function () {
      getWorkerList().then((res) => {
        this.service = res.data;
      });
    },
    // 获取影院留言
    getLeavingMsg: function () {
      getLeavingMsg().then((res) => {
        this.LeavingMsg = res.data;
      });
    },
    // 我的评价
    getWorkerEvaMsg: function (id) {
      this.MyEvaluateTableVisible = true;
      getWorkerEvaMsg(id).then((res) => {
        this.MyEvaluate = res.data;
      });
    },
    //点击评价客服按钮
    EvaBtn: function (id) {
      this.serviceEvaluate = true;
      this.EvaId = id;
    },
    // 评价客服
    Evaluate: function () {
      this.serviceEvaluate = false;
      evaluateWorker(
        this.EvaId,
        localStorage.getItem("uid"),
        this.MyserviceEva.content,
        this.MyserviceEva.level
      ).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "评价成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "评价失败",
            type: "warning",
          });
        }
      });
    },
    // 影院留言
    SubLeavingMsg: function () {
      this.isMyMessage = false;
      LeavingMsg(localStorage.getItem("uid"), this.MyMessage).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "发表成功",
            type: "success",
          });
        } else {
          this.$message({
            message: "发表失败",
            type: "warning",
          });
        }
        // 刷新留言
        this.getLeavingMsg();
      });
    },
  },
  mounted() {
    this.getWorker();
    this.getLeavingMsg();
  },
};
</script>

<style lang='less' scoped>
.Msg {
  margin-top: 60px;
  width: 100%;
  .MsgInner {
    margin: 0 auto;
    width: 1440px;
    display: flex;
    .MsgLeft {
      width: 30%;
      height: 500px;
      padding: 0 20px 0 20px;
      overflow: auto;
      background-color: rgba(36, 41, 48, 1);
      .EvaluationEntrance > .el-button {
        margin-right: 60px;
        color: #47b26e;
        font-size: 16px;
      }
      .service {
        height: 150px;
        margin-top: 10px;
        border-bottom: 2px dashed gray;
        overflow: hidden;
        position: relative;
        .EvaluationEntrance {
          clear: left;
          position: absolute;
          bottom: 10px;
          .el-input {
            text-align: center;
          }
        }
        img {
          width: 80px;
          height: 80px;
          border-radius: 40px;
          margin: 20px 0 0 20px;
          float: left;
        }
        .serMsg {
          float: left;
          margin: 10px 0 0 20px;
          span {
            display: block;
            margin-top: 10px;
            color: #d7d7d7;
          }
        }
      }
    }
    .MsgRight > .el-button {
      float: right;
      margin: -10px 80px 40px 0;
    }
    .MsgRight {
      height: 500px;
      overflow: auto;
      width: 70%;
      background-color: rgba(53, 59, 67, 1);
      .cus {
        display: flex;
        justify-content: left;
        flex-wrap: wrap;
        height: 150px;
        margin-top: 10px;
        img {
          width: 60px;
          height: 60px;
          border-radius: 30px;
          margin: 30px 0 0 40px;
        }
        .cusMsg {
          margin: 10px 0 0 20px;
          display: flex;
          flex-flow: column wrap;
          span {
            display: block;
            margin-top: 10px;
            color: #d7d7d7;
            font-size: 16px;
          }
          span:nth-child(2) {
            font-size: 18px;
            color: white;
          }
        }
      }
    }
    .scrollHidden::-webkit-scrollbar {
      width: 0;
    }
    .MsgLeft > span:nth-child(1),
    .MsgRight > span:nth-child(1) {
      font-size: 20px;
      font-weight: bold;
      display: block;
      margin: 40px 0 0 40px;
      color: #d7d7d7;
    }
  }
}

.el-table__row {
  td:nth-child(3) {
    text-align: center;
  }
}
</style>